<template>
  <input type="text" v-model="data" />
  <div>{{ data }}</div>
</template>

<script>
import { setup, customRef } from "vue";

export default {
  setup() {
    let data = myRef("hello");

    function myRef(value) {
      return customRef((track, trigger) => {
        let timer;
        return {
          get: () => {
            console.log("触发get 获取数据");
            track(); // 确认追踪这个数据
            return value;
          },
          set: (newValue) => {
            console.log("触发set 修改数据=---->", newValue);
            if (timer) clearTimeout(timer); // 做一个防抖
            timer = setTimeout(() => {
              value = newValue;
              trigger(); // 当修改完数据以后通知订阅者 重新获取新的数据
            }, 1000);
          },
        };
      });
    }

    return {
      data,
    };
  },
};
</script>
